<template>
  <!-- 粒子背景 -->
  <vue-particles id="tsparticles" :options="particlesOptions" />
  <!-- 登陆面板 -->
  <div class="loginModel">
    <!-- {{ userStore.token }} -->
    <div class="logeImage">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[
          { required: true, message: '账号不能为空!' },
          { min: 3, max: 15, message: '账号应该在3-15位', trigger: 'blur' },
        ]"
      >
        <a-input
          size="large"
          placeholder="请输入您的账号"
          ref="account"
          v-model:value="formState.username"
        >
          <template #prefix>
            <UserOutlined style="color: (0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: '密码不能为空!' }]"
      >
        <a-input-password
          size="large"
          placeholder="请输入您的密码"
          v-model:value="formState.password"
        >
          <template #prefix>
            <ReconciliationOutlined style="color: (0, 0, 0, 0.25)" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item name="remember">
        <a-checkbox
          v-model:checked="formState.remember"
          class="remeberCheckbox"
        >
          记住密码
        </a-checkbox>
      </a-form-item>

      <a-form-item>
        <a-button
          :loading="isLoading"
          type="primary"
          html-type="submit"
          block
          size="large"
        >
          登录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
// 测试code
import useUserStore from "../../store/user";

import { useRouter } from "vue-router";
import { reactive } from "vue";
import { ref, onMounted } from "vue";
import particlesOptions from "../../config/particles"; //粒子背景的配置
import { UserOutlined, ReconciliationOutlined } from "@ant-design/icons-vue"; //图标
import { message } from "ant-design-vue";
import {
  setStorage,
  getStorage,
  removeStorage,
} from "../../utils/localStorage"; //导入工具函数
const userStore = useUserStore();
const router = useRouter();
const isLoading = ref(false); //发送请求loading
const info = getStorage("userInfo"); //获取账号密码（记住密码）
const initInfo = {
  username: "",
  password: "",
  remember: true,
};
const formState = reactive(info ? info : initInfo); //双向数据绑定表单
const account = ref(null);
//自动获得焦点
onMounted(() => {
  account.value.focus();
});
//验证成功后登陆
const onFinish = async (values) => {
  isLoading.value = true;
  console.log("Success:", isLoading.value, values);
  //记住密码
  const { username, password, remember } = values;
  remember ? setStorage("userInfo", values) : removeStorage("userInfo");
  console.log("Success:", values);
  isLoading.value = true;
  userStore
    .getUserToken({ username, password })
    .then((res) => {
      //成功
      message.success("恭喜您，登陆成功");
      isLoading.value = false;
      router.push("/home");
    })
    .catch((e) => {
      console.log(e);
      isLoading.value = false;
    });
};
//验证失败
const onFinishFailed = () => {
  // console.log("Failed:", errorInfo);
  message.error("验证不通过,请处理");
  isLoading.value = false;
};
</script>

<style lang="less">
.remeberCheckbox {
  color: #fff;
}
// 记住密码样式
:where(.css-dev-only-do-not-override-19iuou).ant-checkbox-wrapper:not(
    .ant-checkbox-wrapper-disabled
  ):hover
  .ant-checkbox-checked:not(.ant-checkbox-disabled)
  .ant-checkbox-inner {
  background-color: rgba(0, 0, 0, 0);
  border-color: transparent;
  border: 2px solid rgba(0, 0, 0, 0);
}
// 鼠标hover时候的颜色
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
  background-color: transparent;
  border: 2px solid #8f8888 !important;
}

// 设置默认的颜色
.ant-checkbox {
  .ant-checkbox-inner {
    border: 2px solid #8f8888;
    background-color: transparent;
  }
}
// 设置选中的颜色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: #8f8888;
  border: 2px solid #8f8888;
}

.loginModel {
  border-radius: 6px;
  width: 500px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 40px;
  color: #fff;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.55);
  // box-shadow: -1px 0 17px 4px rgba(0, 0, 0, 0.55);
  .logeImage {
    display: flex;
    justify-content: center;

    img {
      width: 120px;
      margin-bottom: 20px;
    }
  }
  // 按钮样式
  .btn {
    color: #8f8888;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
  }
  // 按钮点击后样式
  .btn:hover {
    border: 1px solid white;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
  }
  // 输入框样式
  .loginModel_input {
    border: 1px solid rgba(0, 0, 0, 0.5);
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0);
  }
  // 密码框样式
  .ant-input {
    background-color: rgba(0, 0, 0, 0);
  }
  ::-webkit-input-placeholder {
    color: #8f8888;
  }
}
</style>
